<script setup>
import { useI18n } from 'vue-i18n'
import { useRouter } from 'vue-router'
import { NButton, NDatePicker } from 'naive-ui'
import serachInput from '@/components/searchInput/serachInput.vue'
import tipButton from '@/components/customButton/tipButton.vue'
import alarmRemark from './components/alarmRemark.vue'

const { t } = useI18n()
const router = useRouter()

const data = Array.from({ length: 46 }).map((_, index) => ({
  name: `Edward King ${index}`,
  age: 32,
  address: `London, Park Lane no. ${index}`
}))

const goDetail = (row) => {
  router.push({
    path: '/home/device/deviceDetail'
  })
}

const columns = computed(() => {
  return [
    {
      type: 'selection',
      disabled(row) {
        return row.name === 'Edward King 3'
      },
      fixed: 'left'
    },

    {
      title: t('alarm.serialNumber'),
      key: 'name',
      fixed: 'left'
    },
    {
      title: t('alarm.alarmName'),
      key: 'IP'
    },
    {
      title: t('alarm.alarmLevel'),
      key: 'MAC'
    },
    {
      title: t('alarm.generationTime'),
      key: 'version'
    },
    {
      title: t('alarm.confirmTime'),
      key: 'model'
    },
    {
      title: t('alarm.deviceName'),
      key: 'belong'
    },
    {
      title: t('alarm.deviceIp'),
      key: 'date'
    },
    {
      title: t('alarm.deivceModel'),
      key: 'date'
    },
    {
      title: t('system.state'),
      key: 'state'
    },
    {
      title: t('system.operation'),
      key: 'state',
      fixed: 'right',
      render: (row) => {
        return [
          h(
            NButton,
            {
              quaternary: true,
              type: 'primary',
              onClick: () => sendMail(row),
              style: {
                marginRight: '2px'
              }
            },
            { default: () => t('system.confirmText') }
          ),
          h(
            NButton,
            {
              quaternary: true,
              type: 'Error',
              onClick: () => sendMail(row),
              style: {
                marginRight: '2px'
              }
            },
            { default: () => t('system.clear') }
          ),
          h(
            NButton,
            {
              quaternary: true,
              onClick: () => {
                openRemark()
              }
            },
            { default: () => t('alarm.remark') }
          )
        ]
      }
    }
  ]
})

const checkedRowKeysRef = ref([])
const handleCheck = (rowKeys) => {
  checkedRowKeysRef.value = rowKeys
}

const valueChange = (keyword) => {
  console.log(keyword)
}

const deleteHandle = () => {
  console.log('点击了删除')
}

const onChange = () => {}

const remarkRef = ref(null)

const openRemark = () => {
  remarkRef?.value?.openPopup()
}

const datetimerange = ref(null)
</script>

<template>
  <div class="p-6">
    <div class="flex items-center mb-4 flex-wrap">
      <n-select
        :options="[
          { label: t('system.all'), value: 0 },
          { label: t('alarm.notConfirmed'), value: 1 },
          { label: t('alarm.confirmed'), value: 2 },
          { label: t('alarm.cleared'), value: 3 }
        ]"
        class="mr-4"
        style="width: 200px"
      />
      <serachInput @valueChange="valueChange" />
      <n-date-picker
        v-model:value="datetimerange"
        type="datetimerange"
        @update:value="onChange"
        class="lg:ml-4 my-2 lg:my-0"
      />
      <tipButton
        :btnProps="{ type: 'primary' }"
        :btn-text="t('system.confirmText')"
        :text="t('alarm.comfirmTip')"
        className="ml-4 mt-2 lg:mt-0"
        @comfirmHandle="deleteHandle"
      />
      <tipButton
        :btnProps="{ type: 'error' }"
        :text="t('alarm.clearTip')"
        className="mx-4 mt-2 lg:mt-0"
        @comfirmHandle="deleteHandle"
      />
    </div>
    <n-data-table
      :columns="columns"
      :data="data"
      :pagination="{ pageSize: 5 }"
      :row-key="(row) => row.address"
      @update:checked-row-keys="handleCheck"
      :scroll-x="1200"
    />
    <alarmRemark ref="remarkRef" :title="t('alarm.remarksSettings')" />
  </div>
</template>

<style scoped></style>
